<!--
 * @Date: 2022-08-25 14:05:59
 * @LastEditors: StavinLi 495727881@qq.com
 * @LastEditTime: 2023-05-24 15:17:13
 * @FilePath: /Workflow-Vue3/src/components/drawer/promoterDrawer.vue
-->
<template>
  <el-drawer
    :append-to-body="true"
    title="发起人"
    v-model="visible"
    class="set_promoter"
    :show-close="false"
    :size="550"
    :before-close="savePromoter"
  >
    <div class="demo-drawer__content">
      <div class="promoter_content drawer_content">
        <p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
        <el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="savePromoter">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <employees-dialog
        :isDepartment="true"
        v-model:visible="promoterVisible"
        :data="checkedList"
        @change="surePromoter"
      />
    </div>
  </el-drawer>
</template>
<script setup>
import employeesDialog from '../dialog/employeesDialog.vue'
import $func from '../utils/index'
import { computed, ref, watch, inject } from 'vue'

const props = defineProps({
  internalState: {
    type: Object,
    default: null,
  },
})

const flowPermission = ref([])
const promoterVisible = ref(false)
const checkedList = ref([])

// 获取内部状态管理或使用全局store作为fallback
const flowDesignerState = inject('flowDesignerState', null)
// 使用内部状态管理
const state = flowDesignerState.state
const actions = flowDesignerState.actions

const promoterDrawer = computed(() => state.promoterDrawer)
const flowPermission1 = computed(() => state.flowPermission1)
const visible = computed({
  get() {
    return promoterDrawer.value
  },
  set() {
    closeDrawer()
  },
})
watch(flowPermission1, (val) => {
  flowPermission.value = val.value
})

const addPromoter = () => {
  checkedList.value = flowPermission.value
  promoterVisible.value = true
}
const surePromoter = (data) => {
  flowPermission.value = data
  promoterVisible.value = false
}
const savePromoter = () => {
  actions.setFlowPermission({
    value: flowPermission.value,
    flag: true,
    id: flowPermission1.value.id,
  })
  closeDrawer()
}
const closeDrawer = () => {
  actions.setPromoter(false)
}
</script>
<style lang="less">
.set_promoter {
  .promoter_content {
    padding: 0 20px;
    .el-button {
      margin-bottom: 20px;
    }
    p {
      padding: 18px 0;
      font-size: 14px;
      line-height: 20px;
      color: #000000;
    }
  }
}
</style>
